<template>
	<view class="wrap">
		<view class="wrap-info">
			<up-image class="wrap-info-banner" v-if="album.length" :src="album[0].photoPath" width="690rpx" height="690rpx"
				:radius="6"></up-image>
			<view class="wrap-info-list">
				<view class="wrap-info-list-item">
					<view class="wrap-info-list-item-info">
						<view class="wrap-info-list-item-info-t align-center">
							<up-image :src="userDetailObj.headPicture" width="120rpx" height="120rpx"
								:radius="6"></up-image>
							<view class="wrap-info-list-item-info-t-r">
								<view class="user-name">
									{{userDetailObj.wxName}}
								</view>
							</view>
						</view>
						<view class="wrap-info-list-item-info-c">
							{{userDetailObj.cityDistrictName}} · {{userDetailObj.birthday}}年 · {{userDetailObj.workName}} · {{userDetailObj.height}}CM
						</view>
						<view class="wrap-info-list-item-info-tips align-center">
							<view v-show="userDetailObj.isRealMark" class="wrap-info-list-item-info-tips-item align-justify-center">
								<view class="wrap-info-list-item-info-tips-item-sure"></view>
								实名
							</view>
							<view v-show="userDetailObj.isEducationalMark" class="wrap-info-list-item-info-tips-item align-justify-center bgF8A366">
								<view class="wrap-info-list-item-info-tips-item-sure"></view>
								学历
							</view>
							<view v-show="userDetailObj.isHouseMark" class="wrap-info-list-item-info-tips-item align-justify-center bg60DCEA">
								<view class="wrap-info-list-item-info-tips-item-sure"></view>
								房子
							</view>
							<view v-show="userDetailObj.isCarMark" class="wrap-info-list-item-info-tips-item align-justify-center bg7BADEF">
								<view class="wrap-info-list-item-info-tips-item-sure"></view>
								车子
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wrap-dec">
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					基本情况
				</view>
				<view class="wrap-dec-info-list" style="display: flex;">
					<up-image class="wrap-dec-info-list-img" style="margin-top: 10rpx;" src="/static/images/profile.png" width="26rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							{{userDetailObj.birthday}}年
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{getDictVal('marryStatus',userDetailObj.marry)}}
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{userDetailObj.height}}cm
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{userDetailObj.weight}}kg
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{userDetailObj.nationality}}
						</view>
						<view class="wrap-dec-info-list-tips-item marginTop16">
							{{getDictVal('education',userDetailObj.educational)}}
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/address.png" width="22rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							现居住{{userDetailObj.cityDistrictName}}
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/house.png" width="26rpx" height="26rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							{{getDictVal('buyHouse',userDetailObj.buyHouse)}}
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{getDictVal('buyCar',userDetailObj.buyCar)}}
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/work.png" width="26rpx" height="22rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							私营企业
							{{getDictVal('companyProperty',userDetailObj.companyProperty)}}
						</view>
						<view class="wrap-dec-info-list-tips-item">
							{{getDictVal('work',userDetailObj.workId)}}
						</view>
						<view class="wrap-dec-info-list-tips-item">
							月收入{{getDictVal('income',userDetailObj.income)}}
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/hobby.png" width="26rpx" height="26rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							不吸烟
						</view>
						<view class="wrap-dec-info-list-tips-item">
							偶尔喝点酒
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-dec-info" v-show="optionsData.router === 'waitingMeet'">
				<view class="wrap-dec-info-title">
					小档案情况
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/profile_1.png" width="26rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							聂小倩
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/address_1.png" width="22rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							籍贯天津静海
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/house_1.png" width="26rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							五口家庭
						</view>
						<view class="wrap-dec-info-list-tips-item">
							排行老二
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/work_1.png" width="26rpx"
						height="22rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							父亲上班
						</view>
						<view class="wrap-dec-info-list-tips-item">
							母亲退休
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					信息认证
				</view>
				<view class="wrap-dec-info-aut align-justify-space-between">
					<view class="wrap-dec-info-aut-list align-center-flex-column">
						<up-image src="/static/images/realName.png" width="78rpx" height="78rpx" bgColor="#fff"
							mode=""></up-image>
						<view class="wrap-dec-info-aut-text">
							实名认证
						</view>
					</view>
					<view class="wrap-dec-info-aut-list align-center-flex-column">
						<up-image src="/static/images/educationalBackground.png" width="78rpx" height="78rpx"
							bgColor="#fff" mode=""></up-image>
						<view class="wrap-dec-info-aut-text">
							学历认证
						</view>
					</view>
					<view class="wrap-dec-info-aut-list align-center-flex-column">
						<up-image src="/static/images/houseCertification.png" width="78rpx" height="78rpx"
							bgColor="#fff" mode=""></up-image>
						<view class="wrap-dec-info-aut-text">
							房子认证
						</view>
					</view>
					<view class="wrap-dec-info-aut-list align-center-flex-column">
						<up-image src="/static/images/carCertification.png" width="78rpx" height="78rpx" bgColor="#fff"
							mode=""></up-image>
						<view class="wrap-dec-info-aut-text">
							车子认证
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					择偶意向
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/profile.png" width="26rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							1990年
						</view>
						<view class="wrap-dec-info-list-tips-item">
							未婚
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/address.png" width="22rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							现居住天津南开
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/house.png" width="26rpx" height="26rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							已购房
						</view>
						<view class="wrap-dec-info-list-tips-item">
							已购车
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/work.png" width="26rpx" height="22rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							私营企业
						</view>
						<view class="wrap-dec-info-list-tips-item">
							自由职业
						</view>
						<view class="wrap-dec-info-list-tips-item">
							月收入2-5千
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/hobby.png" width="26rpx" height="26rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							不吸烟
						</view>
						<view class="wrap-dec-info-list-tips-item">
							偶尔喝点酒
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/think.png" width="18rpx" height="26rpx"
						mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							没有孩子
						</view>
						<view class="wrap-dec-info-list-tips-item">
							想要孩子
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					兴趣爱好
				</view>
				<view class="wrap-dec-info-aut">
					我是兴趣爱好我是兴趣爱好我是兴趣爱好我是兴趣爱好我是兴趣爱好我是兴趣爱好我是兴趣爱好
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					爱情规划
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/loveMarriage.png" width="26rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							时机到了就结婚
						</view>
					</view>
				</view>
				<view class="wrap-dec-info-list align-center">
					<up-image class="wrap-dec-info-list-img" src="/static/images/lovePregnancy.png" width="14rpx"
						height="26rpx" mode=""></up-image>
					<view class="wrap-dec-info-list-tips align-center">
						<view class="wrap-dec-info-list-tips-item">
							看情况是否要孩子
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					相册
				</view>
				<view class="wrap-dec-info-img align-center">
					<up-image class="wrap-dec-info-img-list" src="/static/images/agreeBg.png" width="302rpx"
						height="302rpx" :radius="6" mode=""></up-image>
					<up-image class="wrap-dec-info-img-list" src="/static/images/agreeBg.png" width="302rpx"
						height="302rpx" :radius="6" mode=""></up-image>
					<up-image class="wrap-dec-info-img-list" src="/static/images/agreeBg.png" width="302rpx"
						height="302rpx" :radius="6" mode=""></up-image>
					<up-image class="wrap-dec-info-img-list" src="/static/images/agreeBg.png" width="302rpx"
						height="302rpx" :radius="6" mode=""></up-image>
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					自我介绍
				</view>
				<view class="wrap-dec-info-text bgF8F6FF">
					对于自己的介绍对于自己的介绍对于自己的介绍对于自己的介绍对于自己的介绍对于自己的介绍对于自己的介绍。
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					爱情观
				</view>
				<view class="wrap-dec-info-text bgFFF8F6">
					自己的爱情观自己的爱情观自己的爱情观自己的爱情观自己的爱情观自己的爱情观自己的爱情观自己的爱情观。。
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					对你的期望
				</view>
				<view class="wrap-dec-info-text bgF2FDFF">
					对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望。。。
				</view>
			</view>
			<view class="wrap-dec-info">
				<view class="wrap-dec-info-title">
					现实拷问
				</view>
				<view class="wrap-dec-info-torture">
					<view class="wrap-dec-info-torture-title">
						1、到目前单身的原因是什么？
					</view>
					对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望。。。
				</view>
				<view class="wrap-dec-info-torture">
					<view class="wrap-dec-info-torture-title">
						2、最期望和他过什么样子的生活？
					</view>
					对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望对你的期望。。。
				</view>
			</view>
		</view>
		<view class="wrap-shield justify-center">
			<view class="wrap-shield-text" @click="openPopup">
				屏蔽/举报
			</view>
		</view>
		<view class="wrap-btn align-justify-space-between" v-if="optionsData.router === 'haveMet'">
			<view class="wrap-btn-item bgA283FF" @click="modalShow = true">
				不在交往
			</view>
			<view class="wrap-btn-item bgFF47AB" @click="hopeDate">
				希望交往
			</view>
		</view>
		<view class="wrap-btn align-justify-space-between" v-if="optionsData.router === 'waitingMeet'">
			<view class="wrap-btn-item" @click="modalShow = true">
				取消认识
			</view>
			<view class="wrap-btn-item active" @click="makeAppointment">
				约见面
			</view>
		</view>
		<view class="wrap-btn align-justify-space-between" v-if="optionsData.router === 'index'">
			<view class="wrap-btn-list align-justify-center" style="background-color: #FF47AB;" @click="sendButler">
				<up-image src="/static/images/wx.png" style="margin-right: 20rpx;" :fade="false" bgColor="transparent"
					width="36rpx" height="34rpx" mode=""></up-image>
				发送管家0/3天
			</view>
			<view class="wrap-btn-list align-justify-center" style="background-color: #A283FF;">
				<up-image src="/static/images/collect.png" style="margin-right: 20rpx;" :fade="false"
					bgColor="transparent" width="36rpx" height="34rpx" mode=""></up-image>
				添加收藏
			</view>
		</view>
		<up-popup v-model:show="show" bgColor="transparent">
			<view class="wrap-shield-popup">
				<view class="wrap-shield-popup-list">
					屏蔽此人
				</view>
				<view class="wrap-shield-popup-list" @click="goReport">
					举报此人
				</view>
				<view class="wrap-shield-popup-list active" @click="show = false">
					取消
				</view>
			</view>
		</up-popup>
		<up-modal class="wrap-modal" :show="modalShow" @confirm="modalConfirm" @cancel="modalShow = false"
			title="取消认识后将会影响您在对方心里印象，确认取消预约吗？" confirmText="确认并转发管家" :showCancelButton="true" cancelColor="#006FFF">
			<view class="slot-content">
				<up-textarea v-model="modalValue" style="background-color:#F1F1F1" placeholderStyle=""
					placeholder="请填写取消原因。" count :maxlength="80"></up-textarea>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		userInfo
	} from '@/api/index.js'
	import {useDictStore} from '@/store'
	const show = ref(false)
	const optionsData = ref({})
	const modalShow = ref(false)
	const modalValue = ref("")
	const userDetailObj = ref({})
	const album = ref([])

	onLoad(options => {
		optionsData.value = options
		getInfo()
	})

	const getInfo = async() => {
		const {userDetail,album} = await userInfo({userId:optionsData.value.userId})
		userDetailObj.value = userDetail
		const {addressCityName,addressDistrictName} = userDetail
		userDetailObj.value.cityDistrictName = addressCityName.replace('市','')+addressDistrictName.replace('区','')
		album.value = album
	}
	
	const getDictVal = (key,val) => {
		return useDictStore().getDictDetail(key,val)
	}
	
	const getBuyHouse = (val) => {
		// return useDictStore().getDict().value.buyHouse.find(type.val === val).val
	}

	const sendButler = () => {
		uni.navigateTo({
			url: '/pages/mine/butler'
		})
	}

	const openPopup = () => {
		show.value = true
	}
	const goReport = () => {
		uni.navigateTo({
			url: '/pages/home/accusation'
		})
		show.value = false
	}

	const modalConfirm = () => {
		modalShow.value = false
		uni.navigateTo({
			url: '/pages/mine/butler'
		})
	}

	const makeAppointment = () => {
		uni.navigateTo({
			url: '/pages/mine/makeAppointment'
		})
	}

	const hopeDate = () => {
		uni.navigateTo({
			url: '/pages/mine/hopeDate'
		})
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx 30rpx 200rpx 30rpx;
		box-sizing: border-box;

		&-modal {
			::v-deep .u-modal__title {
				padding-left: 50rpx;
				padding-right: 50rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #444444;
			}

			.slot-content {
				width: 100%;

				::v-deep .u-textarea__count {
					background-color: transparent !important;
				}
			}
		}


		&-shield-popup {
			height: 428rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			padding: 40rpx;
			box-sizing: border-box;

			&-list {
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #444444;

				&.active {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #FF47AB;
				}
			}
		}

		&-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 162rpx;
			background-color: #fff;
			padding: 16rpx 40rpx;
			box-sizing: border-box;

			&-list {
				width: 314rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
			}

			&-item {
				width: 314rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #FF47AB;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #FF47AB;
				line-height: 80rpx;
				text-align: center;
				background-color: #FFE9F5;

				&.active {
					background-color: #FF47AB;
					border-color: transparent;
					color: #FFFFFF;
				}

				&.bgA283FF {
					background-color: #A283FF;
					color: #fff;
					border-color: transparent;
				}

				&.bgFF47AB {
					background-color: #FF47AB;
					color: #fff;
					border-color: transparent;
				}
			}
		}

		&-shield {
			margin: 80rpx 0 180rpx 0;

			&-text {
				position: relative;
				width: 180rpx;
				height: 58rpx;
				text-align: center;
				line-height: 58rpx;
				background-color: #E1E6F0;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #777777;

				&:before,
				&:after {
					position: absolute;
					width: 160rpx;
					height: 2rpx;
					top: 0;
					bottom: 0;
					margin: auto;
					background-color: #E1E6F0;
					content: "";
				}

				&:before {
					left: -180rpx;
				}

				&:after {
					right: -180rpx;
				}
			}
		}

		&-dec {
			&-info {
				margin-bottom: 30rpx;
				background-color: #fff;
				padding: 40rpx;
				box-sizing: border-box;
				font-size: 30rpx;

				&-title {
					margin-bottom: 40rpx;
					font-weight: bold;
					font-size: 34rpx;
					color: #222222;
					line-height: 34rpx;
				}

				&-torture {
					margin-bottom: 40rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&-title {
						margin-bottom: 20rpx;
						font-weight: bold;
						font-size: 30rpx;
						color: #FF47AB;
					}
				}

				&-text {
					padding: 40rpx;
					box-sizing: border-box;
				}

				.bgF8F6FF {
					background-color: #F8F6FF;
				}

				.bgFFF8F6 {
					background-color: #FFF8F6;
				}

				.bgF2FDFF {
					background-color: #F2FDFF;
				}

				&-img {
					flex-wrap: wrap;

					&-list {

						&:nth-child(1),
						&:nth-child(3) {
							margin-right: 6rpx;
						}

						&:nth-child(1),
						&:nth-child(2) {
							margin-bottom: 6rpx;
						}
					}
				}

				&-aut {
					font-weight: 400;
					font-size: 26rpx;
					color: #777777;

					&-text {
						margin-top: 20rpx;
					}
				}

				&-list {
					display: flex;
					margin-bottom: 40rpx;

					&-img {
						margin-right: 30rpx;
					}

					&-tips {
						flex-wrap: wrap;

						&-item {
							margin-right: 15rpx;
							padding: 15rpx;
							box-sizing: border-box;
							background-color: #F2F4F5;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-size: 26rpx;
							color: #444444;
							&.marginTop16{
								margin-top: 16rpx;
							}
						}
					}
				}
			}
		}

		&-info {
			height: 952rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&-list {
				height: 262rpx;
				margin-top: -20rpx;
				box-sizing: border-box;
				background-color: #ffffff;

				&-item {
					position: relative;
					width: 100%;
					margin-bottom: 38rpx;
					padding: 0 40rpx;
					box-sizing: border-box;

					&-info {
						&-t {
							&-r {
								margin-left: 20rpx;

								.user-name {
									font-size: 34rpx;
									color: #222222;
									font-weight: bold;
								}
							}
						}

						&-c {
							width: 544rpx;
							height: 26rpx;
							margin: 40rpx 0 20rpx 0;
							font-size: 30rpx;
							color: #444444;
						}

						&-tips {
							margin-top: 16rpx;

							&-item {
								width: 82rpx;
								height: 34rpx;
								margin-right: 16rpx;
								background-color: #57EE91;
								font-size: 22rpx;
								color: #ffffff;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								
								&.bgF8A366{
									background-color: #F8A366;
								}
								
								&.bg60DCEA{
									background-color: #60DCEA;
								}
								
								&.bg7BADEF{
									background-color: #7BADEF;
								}

								&-sure {
									width: 22rpx;
									height: 22rpx;
									margin-right: 4rpx;
									background: url('/static/images/sure.png') center/cover no-repeat;
								}
							}
						}
					}
				}
			}
		}
	}
</style>